<template>
  <div>
     
      <label class="redio-label">上传方式：</label>
      <input class="redio" checked type="radio" @change="method=1" name="updateMethod">&nbsp;<span style="font-size:10px">链接</span>&nbsp;
      <input class="redio" type="radio"  @change="method=2" name="updateMethod">&nbsp;<span style="font-size:10px">文件</span>
        <hr>
    <div v-show="method==1">
        <label>链接</label>
        <input v-model="banner" class="input" type="text">
    </div>
    
    <!-- 文件上传尚未开发尽请期待 -->
    <div v-show="method==2">
        <p>抱歉！文件上传功能 小小程序员小北辞正在拼命开发中！敬请期待哟！</p>
    </div>
   
    <p style="text-align:right"><button @click="saveInfo">{{saveMessage}}</button></p>
  </div>
</template>

<script>
export default {
    data(){
        return{
           method:1,
           saveMessage:"保存",
           banner:"",
        }
    },
    methods:{
        saveInfo(){
            //将信息传给父组件
            this.$emit('saveImage', this.banner);
            //将输入框禁止
            this.save=!this.save
            this.saveMessage=="已保存"?this.saveMessage="保存":this.saveMessage="已保存"
            
        }
    }
}
</script>

<style scoped lang="less">
    label{
        display: block;
        font-size: 10px;
        margin-top: 5px;
    }
    .input{
        width: 200px;
        height: 30px;
        border: none;
        background: rgb(97, 192, 247);
        outline: 0;
        padding-left: 10px;
        border-radius: 5px;
        display: block;
    }
    .redio-label{
        display: initial;
        margin-left: 5px;
        
    }
    .redio{
        margin-top: 15px;
    }
    button{
        width: 60px;
        height: 30px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        background:rgb(74, 170, 226)
    }
    hr{
        margin: 10px 0;
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 109, 109, 0.75), rgba(0, 0, 0, 0));
    }
</style>